(function () {
	
	var baseUrl = 'http://117.159.206.248:20888'
	var token = "d7e7627d-22f3-4f70-b14d-253bb3bf6e1e"

	new Vue({
		el: '#app',
		data: function() {
			return {
				allPose: [],
				visible: false,
				month: [
					{
						value: '01',
						label: '1月'
					}, {
						value: '02',
						label: '2月'
					}, {
						value: '03',
						label: '3月'
					}, {
						value: '04',
						label: '4月'
					},{
						value: '05',
						label: '5月'
					},{
						value: '06',
						label: '6月'
					},{
						value: '07',
						label: '7月'
					},{
						value: '08',
						label: '8月'
					},{
						value: '09',
						label: '9月'
					},{
						value: '10',
						label: '10月'
					},{
						value: '11',
						label: '11月'
					},{
						value: '12',
						label: '12月'
					}
				],
				nowYear: '2018',
				month_3: '11',
				data1: {
					name: [],
					money: [],
					subMoney: []
				},
				data1_month: '',
				data2: {
					list1: [],
					list2: [],
					list3: [],
					list4: [],
					date: []
				},
				data2_date: '',
				data3: {
					name: [],
					data: [],
				},
				data3_month: '',
				data4: {
					name: [],
					money:[],
					count:[]
				},
				data4_date: '',
				data4_list: [],
				data5: {},
				data5_date: '',
				data5_id: '0157390379',
				data6:{},
				data6_date: ''
			}
		},
		methods: {
			getAllPose() {
				let _this = this
				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/deviceparameters/findAllDev',
					},
					success(res) {
						let temArr = []
						let list = res.object
						list.forEach(v => {
							let obj = new Object()
							obj.name = v.ctrlname
							obj.id = v.serialno
							temArr.push(obj)
						})
						_this.allPose = temArr
						_this.xhrFive()
					},
					error(er) {
						console.info(er)
					}
				})
			},

			data1_monthChange(val) {
				this.data1_month = val
				this.xhrOne()
			},

			data2_date_change() {
				this.xhrTwo()
			},

			data3_monthChange(val) {
				this.data3_month = val
				this.xhrThree()
			},

			data4_date_change() {
				this.xhrFour()
			},

			data5_idChange(val) {
				this.data5_id = val
				this.xhrFive()
			},
			data5_date_change() {
				this.xhrFive()
			},

			data6_date_change(val) {
				this.data6_date = val
				this.xhrSix()
			},


			xhrOne() {
				var _this = this,
					data1 = {}
					data1_name = [],
					data1_money = [],
					data1_subMoney = []
				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/chart/sumMonth',
						json: JSON.stringify({
							queryTime: `${_this.nowYear}-${_this.data1_month}`
						})
					},
					success(res) {
						let data = res.object
						if(data.length == 0) {
							_this.data1 = {...{}, ...{name: [], money: [], subMoney: []}}
							_this.drawOne()
							return false
						}
						data.forEach((v, key) => {
							if(key < 15) {
								v.consumemoney = Math.abs(v.consumemoney)
								v.subconsumemoney = Math.abs(v.subconsumemoney)
								data1_name.push(v.filialename)
								data1_money.push(v.consumemoney)
								data1_subMoney.push(v.subconsumemoney)
							}
						})
						data1.name = data1_name
						data1.money = data1_money
						data1.subMoney = data1_subMoney
						console.info(data1)
						_this.data1 = {...{}, ...data1}
						_this.drawOne()
					},
					error(er) {
						console.info(er)
					}
				})
			},
			drawOne() {
				let _this = this
				var option1 = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['现金', '福利'],
						align: 'left',
						left: 60,
						textStyle: {
							color: '#fff'
						}
					},
					xAxis: {
						type: 'category',
						data: _this.data1.name,
						axisLabel: {
							interval: 0,
							color: '#595A5E',
							rotate: -45,
							formatter(value) {
								if (value.length > 5) {
									return value.substring(0, 5) + "...";
								} else {
									return value;
								}
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#595A5E'
						}
					},
					series: [
						{
							name: '现金',
							data: _this.data1.money,
							type: 'bar',
							itemStyle: {
								color: '#26C4FF'
							},
						},
						{
							name: '福利',
							data: _this.data1.subMoney,
							type: 'bar',
							itemStyle: {
								color: '#225566'
							},
							label: {
								normal: {
									show: true
								}
							}
						}
					]
				}
				echarts.init(document.getElementById('moneyDetail')).setOption(option1)
			},

			xhrTwo() {
				let _this = this
				let obj = {}
				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/chart/peakConsume',
						json: JSON.stringify({
							startdate: `${_this.data2_date} 11:40`,
							enddate: `${_this.data2_date} 12:00`,
							ids: '0159961088,0157390379,0159961054,0157390769'
						})
					},
					success(res) {
						let info = res.object
						obj.list1 = info.list1.map(val => val.count)
						obj.list2 = info.list2.map(val => val.count)
						obj.list3 = info.list3.map(val => val.count)
						obj.list4 = info.list4.map(val => val.count)
						obj.date = info.list3.map(val => val.consumetime)
						_this.data2 = obj
						_this.drawTwo()
					},
					error(er) {
						console.info(er)
					}
				})

				// $.ajax({
				// 	url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
				// 	type: 'post',
				// 	dataType: 'json',
				// 	async: true,
				// 	data: {
				// 		token: window.token,
				// 		method: '/consume/deviceparameters/findAllDev',
				// 	},
				// 	success(res) {
				// 		console.info(res)
				// 	},
				// 	error(er) {
				// 		console.info(er)
				// 	}
				// })

			},
			drawTwo() {
				let _this = this
				var option2 = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['千喜鹤新园区套餐','千喜鹤新园区套餐二','健立源回民餐','健立源套餐'],
						align: 'left',
						left: 60,
						textStyle: {
							color: '#fff'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							interval: 0,
							color: '#595A5E',
							rotate: -50
						},
						data: _this.data2.date
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#595A5E',
						}
					},
					series: [
						{
							name:'千喜鹤新园区套餐',
							type:'line',
							data: _this.data2.list1,
							lineStyle: {
								color: '#2B99FF',
								width: 4,
								type: 'solid'
							},
							itemStyle : {
								color: '#2B99FF',
							}
						},
						{
							name:'千喜鹤新园区套餐二',
							type:'line',
							data:_this.data2.list2,
							lineStyle: {
								color: '#F8B136',
								width: 4,
								type: 'solid'
							},
							itemStyle : {
								color: '#F8B136',
							}
						},
						{
							name:'健立源回民餐',
							type:'line',
							data:_this.data2.list3,
							lineStyle: {
								color: '#E5F2FF',
								width: 4,
								type: 'solid'
							},
							itemStyle : {
								color: '#E5F2FF',
							}
						},
						{
							name:'健立源套餐',
							type:'line',
							data:_this.data2.list4,
							lineStyle: {
								color: '#23F9EC',
								width: 4,
								type: 'solid'
							},
							itemStyle : {
								color: '#23F9EC',
							}
						},
					]
				}
				echarts.init(document.getElementById('moneyHigh')).setOption(option2)
			},

			xhrThree() {
				let _this = this,
					data3 = {},
					name = [],
					list = []
				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/chart/findConsumeAndRecharge',
						json: JSON.stringify({
							queryTime: `${_this.nowYear}-${_this.data3_month}`
						})
					},
					success(res) {
						if(!res.object.length) {
							return false
						}
						let data = res.object[0]
						name = ['现金消费', '现金充值', '福利消费', '福利充值']
						list  = [
							{
								value: Math.abs(data.consumemoney),
								name: '现金消费'
							},
							{
								value: data.crecharge,
								name: '现金充值'
							},
							{
								value: Math.abs(data.subconsumemoney),
								name: '福利消费'
							},{
								value: data.wrecharge,
								name: '福利充值'
							}
						]
						data3.name = name
						data3.data = list
						console.info(data3)
						_this.data3 = data3
						_this.drawThree()
					},
				})
			},
			drawThree() {
				let _this = this
				var option3 = {
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						x: 'left',
						left: 60,
						data: _this.data3.name,
						textStyle: {
							color: '#fff'
						}
					},
					series: [
						{
							name:'金额',
							type:'pie',
							radius: ['40%', '60%'],
							avoidLabelOverlap: false,
							label: {
								normal: {
									show: true,
									position: 'outside',
									fontSize: 12,
									fontWeight: 'bolder',
								},
								emphasis: {
									show: true,
									textStyle: {
										fontSize: '30',
										fontWeight: 'bold'
									}
								}
							},
							labelLine: {
								normal: {
									show: true
								}
							},
							data: _this.data3.data
						}
					]
				}
				echarts.init(document.getElementById('moneyLay')).setOption(option3)
			},

			xhrFour() {
				let _this = this,
					obj = {}
				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/chart/statisticsConsume',
						json: JSON.stringify({
							startdate: `${_this.data4_date} 06:00`,
							enddate: `${_this.data4_date} 14:00`,
						})
					},
					success(res) {
						let list = res.object
						if(!list.length) {
							_this.data4 = {
								name: [],
								money: [],
								count:[]
							}
							_this.drawFour()
							return false
						}
						obj.name = list.map(v => v.filialeName)
						obj.money = list.map(v => Math.abs(v.sum))
						obj.count = list.map(v => v.count)
						_this.data4 = obj
						_this.drawFour()
					},
					error(res) {
						console.info(res)
					}
				})

			},
			drawFour() {
				let _this = this
				var option1 = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['总额', '次数'],
						align: 'left',
						left: 60,
						textStyle: {
							color: '#fff'
						}
					},
					xAxis: {
						type: 'category',
						data: _this.data4.name,
						axisLabel: {
							color: '#595A5E',
							rotate: -45,
							formatter(value) {
								if (value.length > 5) {
									return value.substring(0, 5) + "...";
								} else {
									return value;
								}
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#595A5E'
						}
					},
					series: [
						{
							name: '总额',
							data: _this.data4.money,
							type: 'bar',
							itemStyle: {
								color: '#26C4FF'
							}
						},
						{
							name: '次数',
							data: _this.data4.count,
							type: 'bar',
							itemStyle: {
								color: '#225566'
							}
						}
					]
				}
				echarts.init(document.getElementById('operate')).setOption(option1)
			},

			xhrFive() {
				let _this = this,
					obj = {}

				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/chart/peakConsume',
						json: JSON.stringify({
							startdate: `${_this.data5_date} 11:40`,
							enddate: `${_this.data5_date} 12:00`,
							ids: _this.data5_id
						})
					},
					success(res) {
						let obj = {}
						let list = res.object.list1
						obj.week = list.map(v => v.consumetime)
						obj.count = list.map(v => v.count)
						_this.data5 = obj
						_this.drawFive()
					},
					error (res) {

					}
				})
			},
			drawFive() {
				let _this = this
				var option1 = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						type: 'category',
						data: _this.data5.week,
						axisLabel: {
							interval: 0,
							color: '#595A5E',
							rotate: -45
						},
						label: {
							normal: {
								show: true,
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#595A5E'
						}
					},
					series: [
						{
							name: '人数',
							data: _this.data5.count,
							type: 'bar',
							itemStyle: {
								color: '#F8B136',
								normal: {
									label: {
										show: true
									}
								}
							}
						}
					]
				}
				echarts.init(document.getElementById('peakNum')).setOption(option1)
			},

			xhrSix() {
				let _this = this
				$.ajax({
					url: window.base_url + '/ccp/MonitoringCenterController/transferResumeMethod',
					type: 'post',
					dataType: 'json',
					async: true,
					data: {
						token: window.token,
						method: '/consume/chart/mealRatio',
						json: JSON.stringify({
							queryTime: _this.data6_date
						})
					},
					success(res) {
						let obj = {},
							arr1 = [],
							arr2 = []
						let info = res.object
						info.forEach((v, key) => {
							if(key < 15) {
								arr1.push(v.filialename)
								arr2.push(parseFloat(v.pcwc * 100).toFixed(2))
							}
						})
						// arr2 = ['15%', '16%', '18%','15%', '16%', '18%','15%', '16%', '18%','15%', '16%', '18%','15%', '16%', '18%','15%', '16%', '18%']
						obj.name = arr1
						obj.data = arr2
						_this.data6 = obj
						_this.drawSix()
					},
					error(er) {
						console.info(er)
					}
				})
			},
			drawSix() {
				let _this = this
				var option = {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: _this.data6.name,
						axisLabel: {
							interval: 0,
							color: '#595A5E',
							rotate: -45,
							formatter(value) {
								if (value.length > 5) {
									return value.substring(0, 5) + "...";
								} else {
									return value;
								}
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#595A5E',
							formatter: '{value} %'
						},

					},
					series: [
						{
							name:'就餐比',
							type:'line',
							data: _this.data6.data,
							label: {
								show:true,
								formatter: '{c}%',
							},
							itemStyle: {
								color: '#2B99FF',
								lineStyle: {
									width: 4
								}
							}
						}
					]
				}
				echarts.init(document.getElementById('percent')).setOption(option)
			},
			getPreDay() {
				let year = new Date().getFullYear()
				let month = new Date().getMonth() + 1
				let day = new Date().getDate()
				if(day == 1) {
					if(month == 1) {
						month = 12
						year -= 1
					}else {
						month -= 1
					}
					if([1, 3, 5, 7, 8, 10, 12].includes(month)) {
						day = 31
					}else if([4, 6, 9, 11].includes(month)) {
						day = 30
					}else {
						if((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {
							day = 29
						}else {
							day = 28
						}
					}

				}else {
					day -= 1
				}
				return `${year}-${month}-${day.length > 0 ? day : `0${day}`}`
			}
		},
		async mounted() {
			console.info(this.getPreDay())
			this.data1_month = (new Date().getMonth() + 1).toString()
			this.data3_month = (new Date().getMonth() + 1).toString()
			this.month_3 = new Date().getMonth() + 1
			this.nowYear = new Date().getFullYear()
			let today = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate().length > 1 ? new Date().getDate() : `0${new Date().getDate()}`}`
			this.data2_date = await this.getPreDay()
			this.data4_date = today
			this.data5_date = await this.getPreDay()
			this.data6_date = today
			this.getAllPose()
			this.xhrOne()
			this.xhrTwo()
			this.xhrThree()
			this.xhrFour()
			// this.xhrFive()
			this.getAllPose()
			this.xhrSix()
		}
	})

	$('.dataItem').on('click', function () {
		$('.modelMask').css("display", 'block')
	})


	$('.closeModel').on('click', function () {
		$('.modelMask').css("display", 'none')
	})

})()